<template>
  <div class="filter">
    <div class="search">
      <div class="item">
        <span class="left">名称:</span>
        <el-input
          size="small"
          v-model="searchCondition.name"
          placeholder="请输入名称"
        ></el-input>
      </div>
      <div class="item">
        <span class="left">系统名称:</span>
        <el-select
          v-model="searchCondition.selectSys"
          size="small"
          placeholder="请选择"
          @change="selectSysChanged"
        >
          <el-option
            v-for="item in systemOption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <!-- <el-input
          v-model="searchCondition.systemName"
          placeholder="请输入系统名称"
        ></el-input> -->
      </div>

      <div class="item">
        <span class="left">环境名称:</span>
        <el-select v-model="searchCondition.selectEnv" placeholder="请选择"  size="small">
          <el-option
            v-for="item in envOption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>

      <div class="btn-area">
        <el-button type="primary" @click="handle('search')" size="small">查询</el-button>
        <el-button @click="reset" size="small">重置</el-button>
      </div>
    </div>

    <el-button
      type="primary"
      size="small"
      class="add-btn"
      @click="handle('add')"
      >添加</el-button
    >
  </div>
</template>

<script>
import { mixins } from "@/mixin/index";
export default {
  mixins: [mixins],
  props: {
    systemOption: {
      type: Array,
      default: () => [],
    },
    envOption: {
      type: Array,
      default: () => [],
    },
  },
  components: {},
  data() {
    return {
      searchCondition: {
        name: "",
        selectSys: "-1",
        selectEnv: "-1",
      },
    };
  },
  methods: {
    selectSysChanged() {
      this.$emit("selectSysChanged", this.searchCondition.selectSys);
    },
    handle(type) {
      let {
        name,
        selectSys: systemId,
        selectEnv: environmentId,
      } = this.searchCondition;
      systemId = systemId == -1 ? "" : systemId;
      environmentId = environmentId == -1 ? "" : environmentId;
      this.$emit("handle", type, { name, systemId, environmentId });
    },
    reset() {
      Object.keys(this.searchCondition).forEach(
        (key) => (this.searchCondition[key] = "-1")
      );
      this.searchCondition.name = '';
      this.$emit("updateType");
    },
  },
};
</script>
<style lang="scss" scoped>
.filter {
  padding: 20px 0 0 0;
  padding-top: 5px;
  //   display: flex;
  .search {
    display: flex;
    margin: 0 0 15px;
    align-items: flex-end;
    .item {
      margin-right: 20px;

      .left {
        margin-right: 20px;
      }
    }
  }

  .el-input {
    width: 200px;
  }
}
.btn-area {
  display: flex;
}
</style>
